﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery EasyUI Extensions - Menu</title>

    <link href="../../jquery-easyui-themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../jquery-easyui-themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../../jquery-extensions/jquery.jdirk.js" type="text/javascript"></script>

    <script src="../../jeasyui-extensions/jeasyui.extensions.menu.js"></script>

    <script type="text/javascript">
        $(function () {

            $("#cc1").bind("contextmenu", function (e) {
                e.preventDefault();
                $.easyui.showMenu({
                    event: e,
                    items: [
                        {
                            text: "item1", onclick: function (e, item, menu) {
                                alert(e.pageX);
                            }
                        },
                        { text: "item2", bold: true },
                        {
                            text: function (eve, item, root) {
                                return eve.target.nodeName
                            },
                            bold: true, style: { color: "red" }
                        }
                    ]
                });
            });

        });
    </script>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div data-options="region: 'south', title: 'south', split: true" style="height: 100px;"></div>
    <div data-options="region: 'west', title: 'west', split: true" style="width: 200px;"></div>

    <div data-options="region: 'center', title: 'center', split: true" style="padding: 20px;">

        <div id="cc1" style="width: 200px; height: 140px; border: 1px solid black; float: left;">cc1</div>
        <div id="cc2" style="width: 200px; height: 140px; border: 1px solid black; float: left; margin-left: 10px;">cc2</div>
        <div id="cc3" style="width: 200px; height: 140px; border: 1px solid black; float: left; margin-left: 10px;">cc3</div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <hr />
        <iframe width="400" height="300" src="jEasyUIExtensions-Menu-SubPage.html"></iframe>

    </div>

    <div data-options="region: 'east', title: 'east', split: true" style="width: 200px;"></div>
    <div data-options="region: 'north', title: 'north', split: true" style="height: 100px;"></div>
</body>
</html>
